<!-- 加载gltf,有问题。不知为何旋转了，使用的是revit导出的gltf格式， -->
<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
  </div>
</template>

<script>
  export default {
    name: "cesiumviewer",
    data() {
      return {
        value1: '1',
        formItem: {
          input: '',
          select: '',
          radio: 'male',
          checkbox: [],
          switch: true,
          date: '',
          time: '',
          slider: [20, 50],
          textarea: ''
        }
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //   url:
        //     "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        // })
      });

      // 不加载默认bing的卫星图
      //this.viewer.imageryLayers.get(0).show = false;
      //设置版权等信息不显示
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      //根据太阳位置开启照明
      this.viewer.scene.globe.enableLighting = true;
      //this.viewer.scene.debugShowFramesPerSecond = true;
      this.viewer.scene.skyAtmosphere.show = false;

      //设置初始位置
      // this.viewer.camera.setView({
      //   destination: Cesium.Cartesian3.fromDegrees(113.6, 22.7, 6500),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0),
      //     pitch: Cesium.Math.toRadians(-40),
      //     roll: 0
      //   }
      // });

      //let url = '../../../static/models/Cesium_Air.glb'
      let url = '../../../static/models/V2020.gltf'
      let tmpOri = {
        heading: Cesium.Math.toRadians(10),
        pitch: Cesium.Math.toRadians(-10),
        roll: 0
      }
      let position = Cesium.Cartesian3.fromDegrees(110.6, 32.8, 0)
      console.log('pt', position)
      // let entity = this.viewer.entities.add({
      //   id: 0,
      //   name: url,
      //   position: position,
      //   //orientation: tmpOri,
      //   model: {
      //     uri: url,
      //     minimumPixelSize: 128,
      //     maximumScale: 2000
      //   }
      // });
      // this.viewer.trackedEntity = entity; //跟踪


      let viw = this.viewer
      var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction(function(movement) {
        var pick = viw.scene.pick(movement.position);
        console.log('pick 啥？')
        if (Cesium.defined(pick) && (pick.id.id === 0)) {
          console.log('选中了', url)
        } else {
          console.log('没有选中')
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


      //贴地线
      // var yellowLine = viw.entities.add({
      //   name: 'Red line on the surface',
      //   corridor: {
      //     positions: Cesium.Cartesian3.fromDegreesArray([
      //       112.82436,
      //       23.071506,
      //       112.82742,
      //       23.067512,
      //       112.828878,
      //       23.064659,
      //       112.830799,
      //       23.060947,
      //       112.832166,
      //       24.058329
      //     ]),
      //     width: 20,
      //     material: Cesium.Color.YELLOW
      //   }
      // });
      // this.viewer.trackedEntity = yellowLine


      // 创建盒子 自动伸长的盒子
      var blueBox = this.viewer.entities.add({
        name: 'Blue box',
        position: Cesium.Cartesian3.fromDegrees(110.6, 32.8, 0.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 5000000.0),
          material: Cesium.Color.RED.withAlpha(0.2),
          outline: true,
        }
      });


      var property = new Cesium.SampledProperty(Cesium.Cartesian3);
      let start = Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z');
      let stop = Cesium.JulianDate.fromIso8601('2019-01-01T00:10:00.00Z');
      property.addSample(start,
        new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
      property.addSample(stop,
        new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
      blueBox.box.dimensions = property;
      this.viewer.clock.currentTime = start.clone();
      this.viewer.clock.multiplier = 30;
      this.viewer.trackedEntity = blueBox;


    },

    methods: {
      okClick() {
        console.log('ok。。。')
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url(../../node_modules/cesium/Build/Cesium/Widgets/widgets.css);

  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }

  .toolbar {
    background: rgba(42, 42, 42, 0.7);
    margin-top: 10px;
    padding: 4px;
    border-radius: 4px;
    z-index: 10;
    position: relative;
    width: 200px;
    height: 100px;
    color: white;
    font-weight: bold;
  }

  .property {
    z-index: 10;
    position: relative;
    float: right;
    background: rgba(42, 42, 42, 0.5);
    width: 400px;
    height: 400px;
    color: white;
    overflow-y: auto;
  }

  .cesium-widget-credits {
    display: none !important;
    visibility: hide !important;
  }
</style>
